<!--
 * @Date: 2022-05-07 13:31:20
 * @LastEditors: tmzdy
 * @Author: tmzdy
 * @Description: 文件
-->
<template>
	<tm-drawer ref="drawer" @close="drawerClose" @open="drawerOpen" :height="cHeight" @update:show="show = $event"
		:show="show" :transprent="true" :hide-header="true">
		<view class=" flex flex-col">
			<view style="height: 24rpx;"></view>

			<view class=" flex flex-col round-2 overflow mx-32">
				<tm-sheet :round="0" :margin="[0,0]" :padding="[0,10]" _class="flex-center opacity-5" no-level >
					<tm-text :font-size="24" label="请选择"></tm-text>
				</tm-sheet>
				<tm-button :followTheme="false" :disabled="item.disabled" @click="change(item)"
					v-for="(item, index) in _list" :key="index" :label="item.text" :font-size="28" :margin="[0, 0]"
					color="white" block :shadow="0" :round="-1" ></tm-button>
			</view>
			<tm-button :followTheme="false" @click="cancel" label="取消" :font-size="28" :margin="[32, 8]" :color="_color"
				block :shadow="0" ></tm-button>
		</view>
	</tm-drawer>
</template>

<script lang="ts" setup>
	/**
	 * 快速操作栏
	 * @description 从底部弹出的快速操作菜单栏，对于单项可选项目操作，非常有用，且便利。
	 */
	import {
		ref,
		PropType,
		computed,
		getCurrentInstance,
		watch,
		watchEffect
	} from "vue"
	import tmDrawer from '../tm-drawer/tm-drawer.vue';
	import tmButton from "../tm-button/tm-button.vue";
	import tmText from "../tm-text/tm-text.vue";
	import tmSheet from "../tm-sheet/tm-sheet.vue";
	/**
	 * 事件说明
	 * v-model:显示和隐藏
	 * change:当点击项目时触发，返回listitem数据
	 * cancel:点击取消时触发
	 */
	const emits = defineEmits(["update:modelValue", "change", "cancel"])
	interface listitem {
		text ? : string,
			disabled ? : boolean,
			[prop: string]: any;
	}
	const {
		proxy
	} = getCurrentInstance();
	const props = defineProps({

		list: {
			type: Array as PropType < Array < listitem > | Array < string >> ,
			default: () => [],
			required: true
		},
		//当list为对象数组时，需要提供。
		rangKey: {
			type: String,
			default: 'text'
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: "white"
		}
	})
	const show = ref(props?.modelValue ?? false);
	const _list = computed < Array < listitem >> (() => {
		let plist = props?.list ?? [];
		let listdata: Array < listitem > = [];
		listdata = plist.map(el => {
			let d: listitem = {};
			if (typeof el == 'string' || typeof el == 'number') {
				d.text = el;
				d.disabled = false;
			} else if (typeof el == 'object') {
				d.text = el[props.rangKey];
				d = {
					...d,
					...el
				};
			}
			return d;
		})
		return listdata
	})
	const cHeight = computed(() => {
		let len = _list.value.length + 1
		return len * 76 + len * 2 + 180
	})
	const _color = computed(() => props.color)

	watchEffect(() => show.value = props.modelValue)

	function change(item: listitem) {
		emits("change", item)
		proxy.$refs.drawer.close()
	}

	function cancel() {
		emits("cancel")
		proxy.$refs.drawer.close()
	}

	function drawerClose() {
		emits("update:modelValue", false)
	}

	function drawerOpen() {
		emits("update:modelValue", true)
	}
</script>

<style>
</style>
